<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../zTree_v3/css/demo.css" type="text/css">
    <link rel="stylesheet" href="../zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <style>
        body {
            margin: 0;
            padding: 0;
            text-align: center;
            background-image: url("../image/水漫漫.jpg");
            background-repeat: no-repeat;
            background-size: 100%;
            font-size: 25px;
            font-family:STXingkai;
            color: white;
        }
    </style>
</head>
<body>

        <button id="return">返回</button><br>
        职位名称：<input id="job">
        <div style="margin-left:560px ">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
        <button id="submit">提交按钮</button>



    <script type="text/javascript" src="../css/jquery-3.4.1.js"></script>
    <script src="../bootstrap/js/bootstrap.js" ></script>
    <script src="../vue/vue.js" charset="utf-8"></script>
    <script type="text/javascript" src="../zTree_v3/js/jquery.ztree.all.js"></script>
    <script>
     $("#return").click(function () {
         window.location.href="job.html";
     })


    //提交按钮点击事件
    $("#submit").click(function () {
        //获取job框的内容
        let jobTitle = $("#job").val();
        //获取树对象
        let treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        //获取被选中的节点
        let treeNodes = treeObj.getCheckedNodes(true)


        //调用添加方法
        $.ajax({
            url: "../JobController/addJob",
            type: "post",
            data:{"treeNodes":JSON.stringify(treeNodes),"jobTitle":jobTitle},//传送参数时将数组转换为json数组形式
            async: false,
            dataType: "json",
            success: function (data) {
                if (data.msg=="添加成功！"){
                    alert(data.msg);
                    window.location.href="job.html";
                }else{
                    alert("添加失败，请重新添加！");
                }
            }
        })
    })



        $(document).ready(function () {
            //ajax提交数据，请求后台PHP处理返回出目录结构json数据
            $.ajax({
                url: "../MenuController/selMenuAll",
                type: "post",
                async: false,
                dataType: "json",
                success: function (data) {
                    zNodes = data.list;   //将请求返回的数据存起来
                    console.log(zNodes);
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                }
            })
        });


        function zTreeOnClick(event, treeId, treeNode) {
            console.log(treeNode);
            console.log(treeNode.menuId);
            console.log(treeNode.menuPid);
            console.log(treeNode.menuName);
        };

        var setting = {
            check: {
                enable: true,
                chkStyle : "checkbox",
            },
            data:{
                key: {
                    name: "menuName",
                    title:"menuName"
                },
                simpleData: {
                    enable: true,
                    idKey: "menuId",
                    pIdKey: "menuPid",
                    rootPId: 0
                }
            },
            callback: {
                onClick: zTreeOnClick
            }
        };
    </script>
</body>
</html>